<template>
  <div>
    <!-- <h1>商品出入库数量排行榜</h1> -->
    <el-select 
    v-model="value" 
    placeholder="请选择时间差" 
    style="width: 150px;margin: 10px;"
    @change="handleSelectChange"
   
    >
      <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
     
    
    <el-card>
      <div style="display: flex;">
        <div class="chart-container" ref="chart" style="margin-left: 90px;"></div>
        <div class="chart-container1" ref="chart1" style="margin-left: 50px;"></div>
      </div> 
    </el-card>
  

  </div>
</template>

<script>
import * as echarts from 'echarts';
 
export default {
 
  data(){
    return{
      productData: [], // 存储从后端获取的入库商品数据
      productData1: [], // 存储从后端获取的出库商品数据

      value:'近一个月',
      options: [
        {
          value: '近一个月',
          label: '近一个月'
        },
        {
          value: '近三个月',
          label: '近三个月'
        },
        {
          value: '近六个月',
          label: '近六个月'
        },
        {
          value: '近一年',
          label: '近一年'
        }
      ]
    }
  },
  methods:{

    handleSelectChange(value){
      console.log(value);
      // this.getData()
      this.$nextTick(() =>{
        this.fetchProductData()
       this.fetchProductData1()
      })
     
    },
    // getData(){
    //   const timeDiffDescription = this.value
    //   // console.log(this.value);
    //   this.$axios.post(`/api/in_warehouse/rank?timeDiffDescription=${encodeURIComponent(timeDiffDescription)}`).then(res => {
    //     console.log(res);
    //   })
    // },


    fetchProductData() {
      const timeDiffDescription = this.value
      this.$axios.post(`/api/in_warehouse/rank?timeDiffDescription=${encodeURIComponent(timeDiffDescription)}`)
        .then(response => {
          console.log('入库数据');
          console.log(response);
          this.productData = response.data.data; // 将返回的数据赋值给productData
          this.productData = this.productData.sort((a,b) => b.totalNumber - a.totalNumber); // 根据入库数量降序排列
          this.productData = this.productData.slice(0,6); // 仅保留前六条数据
          // 调用图表渲染方法
          this.renderChart();
        })
        .catch(error => {
          console.error(error);
        });
    },
    fetchProductData1() {
      const timeDiffDescription1 = this.value
      this.$axios.post(`/api/out_warehouse/rank?timeDiffDescription=${encodeURIComponent(timeDiffDescription1)}`)
        .then(response => {
          console.log('出库数据');
          console.log(response);
          this.productData1 = response.data.data; // 将返回的数据赋值给productData
          this.productData1 = this.productData1.sort((a,b) => b.totalNumber - a.totalNumber); // 根据入库数量降序排列
          this.productData1 = this.productData1.slice(0,6); // 仅保留前六条数据
          // 调用图表渲染方法
          this.renderChart1();
        })
        .catch(error => {
          console.error(error);
        });
    },
    renderChart() {
      const chart = echarts.init(this.$refs.chart,'dark');
      const option = {
         // 全局调色盘。
        color: [
          '#c23531',
          '#2f4554',
          '#61a0a8',
          '#d48265',
          '#91c7ae',
          '#749f83',
          '#ca8622',
          '#bda29a',
          '#6e7074',
          '#546570',
          '#c4ccd3'
        ],
        // 点击时显示的信息
        tooltip: {
            show: true
          },
        title: {
          text: '入库商品数量排行榜'
        },
        yAxis: {
          type: 'category',
          inverse:true,
          // 显示坐标轴刻度线
          axisTick: {
              show: false
            },
          // 设置坐标轴的格式
          axisLine: {
              show: false,
            },
            axisLabel: {
              inside: true,
              verticalAlign: 'bottom',
              lineHeight: 40,
              color: '#DDDFEB',
              formatter: function (value, index) {   // 设置y轴文字的颜色
                if (index > 2) {
                  return '{first|' + value + '}'
                } else {
                  return '{other|' + value + '}'
                }
              },
            rich: {
                other: {
                  color: '#DDDFEB',
                  opacity: 0.57,
                  fontSize:14
                },
                first: {
                  color: '#DDDFEB'
                }
              }
            },
          data: this.productData.map(item => item.name)
        },

        xAxis: {
          nameTextStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              align: 'right'
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.8)'
            },
          type: 'value'
        },
        grid: {
            top: '0%',
            bottom: '0%',
            left: '0%',
            right: '0%'
          },
        series: [{
          data: this.productData.map(item => item.totalNumber),
          type: 'bar',
          barWidth:15,

          itemStyle: {
              
                borderRadius: [3, 20, 20, 3],
                color: function (params) {   // 设置柱形图的颜色
                  if (params.dataIndex === 2) {
                    return '#d84430'
                  } else if (params.dataIndex === 1) {
                    return '#f38237'
                  } else if (params.dataIndex === 0) {
                    return '#e2aa20'
                  } else {
                    return '#608289'
                  }
                }
            
            },
           // 此系列自己的调色盘。
          color: [
            '#dd6b66',
            '#759aa0',
            '#e69d87',
            '#8dc1a9',
            '#ea7e53',
            '#eedd78',
            '#73a373',
            '#73b9bc',
            '#7289ab',
            '#91ca8c',
            '#f49f42'
          ]
        }]
      };
      chart.setOption(option);
      window.addEventListener('resize',() => {
        chart.resize({
          width: 500,
          height: 400
        })
      })
    },

    renderChart1() {
      const chart1 = echarts.init(this.$refs.chart1,'dark');
      const option = {
         // 全局调色盘。
        // color: [
        //   '#c23531',
        //   '#2f4554',
        //   '#61a0a8',
        //   '#d48265',
        //   '#91c7ae',
        //   '#749f83',
        //   '#ca8622',
        //   '#bda29a',
        //   '#6e7074',
        //   '#546570',
        //   '#c4ccd3'
        // ],
        color:['#d84430'],
        // 点击时显示的信息
        tooltip: {
            show: true
          },
        title: {
          text: '出库商品数量排行榜'
        },
        yAxis: {
          type: 'category',
          inverse:true,
          // 显示坐标轴刻度线
          axisTick: {
              show: false
            },
          // 设置坐标轴的格式
          axisLine: {
              show: false,
            },
            axisLabel: {
              inside: true,
              verticalAlign: 'bottom',
              lineHeight: 40,
              color: '#DDDFEB',
              formatter: function (value, index) {   // 设置y轴文字的颜色
                if (index > 2) {
                  return '{first|' + value + '}'
                } else {
                  return '{other|' + value + '}'
                }
              },
            rich: {
                other: {
                  color: '#DDDFEB',
                  opacity: 0.57,
                  fontSize:14
                },
                first: {
                  color: '#DDDFEB'
                }
              }
            },
          data: this.productData1.map(item => item.name)
        },

        xAxis: {
          nameTextStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              align: 'right'
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.8)'
            },
          type: 'value'
        },
        grid: {
            top: '0%',
            bottom: '0%',
            left: '0%',
            right: '0%'
          },
        series: [{
          name:'出库商品数量排行榜',
          data: this.productData1.map(item => item.totalNumber),
          type: 'bar',
          barWidth: 15,

          itemStyle: {
              
                borderRadius: [3, 20, 20, 3],
                color: function (params) {   // 设置柱形图的颜色
                  if (params.dataIndex === 2) {
                    return '#d84430'
                  } else if (params.dataIndex === 1) {
                    return '#f38237'
                  } else if (params.dataIndex === 0) {
                    return '#e2aa20'
                  } else {
                    return '#608289'
                  }
                }
            
            },
           // 此系列自己的调色盘。
          color: [
            '#dd6b66',
            '#759aa0',
            '#e69d87',
            '#8dc1a9',
            '#ea7e53',
            '#eedd78',
            '#73a373',
            '#73b9bc',
            '#7289ab',
            '#91ca8c',
            '#f49f42'
          ]
        }]
      };
      chart1.setOption(option);
      window.addEventListener('resize',() => {
        chart1.resize({
          width: 500,
          height: 400
        })
      })
    }
  },
 mounted() {
    this.fetchProductData();
    this.fetchProductData1()
  }

}
</script>

<style>
  .chart-container {
  height: 400px;
  width: 500px;
}
  .chart-container1 {
    height: 400px;
    width: 500px;
  }
</style>